<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台登录</title>
    <style>
        * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 10px;
            background: #e9ecf3;
        }

        input::placeholder {
            color: #999;
        }

        .content {
            padding: 40px 40px 25px;
            background-color: rgba(255, 255, 255, 0.89);
            border-radius: 5px;
            width: 440px;
            margin: 8% auto 0;
        }

        .logo {
            background: url(/public/static/img/logo_admin.png) center no-repeat;
            height: 205px;
            margin: 0 auto 25px;
        }

        .am-btn {
            background-color: #32c5d2;
            border: none;

            font-size: 16px;
            outline: none;
            border-radius: 2px;
            display: block;
            width: 100%;
            font-weight: 400;
            color: #fff;
            height: 37px;

            cursor: pointer;
            -webkit-transition: background-color .3s ease-out, border-color .3s ease-out;
            transition: background-color .3s ease-out, border-color .3s ease-out;
        }

        .am-btn:hover {
            background-color: #0c79b1;
        }

        .am-form-group {
            margin-bottom: 1.5rem;
        }

        .am-form input[type=text], .am-form input[type=password] {
            width: 100%;
            padding: .5em;
            font-size: 16px;
            line-height: 1.2;
            color: #555;
            border: 1px solid #ccc;
        }

        .am-form input[type=text]:focus, .am-form input[type=password]:focus {
            background-color: #fefffe;
            border-color: #3bb4f2;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 5px rgba(59, 180, 242, .3);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 5px rgba(59, 180, 242, .3);
        }
    </style>
</head>
<body>
<section>
    <div class="content">
        <div class="logo"></div>
        <div class="am-form">
            <div class="am-form-group">
                <label for="user_name"></label>
                <input type="text" id="user_name" placeholder="请输入账号" value="" autocomplete="new-password">
            </div>
            <div class="am-form-group">
                <label for="user_pwd"></label>
                <input type="password" id="user_pwd" placeholder="请输入密码" value="" autocomplete="new-password">
            </div>
            <div class="am-form-group">
                <button type="submit" id="login" class="am-btn">登录</button>
            </div>
        </div>
    </div>
</section>
</body>
<script src="/public/static/js/layui/layui.all.js"></script>
<script src="/public/static/js/encrypt.js"></script>
<script>

    $ = layui.jquery;

    document.onkeydown = function (e) {
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code === 13) {
            $("#login").click();
        }
    };

    $("#login").click(function () {
        var username = $('#user_name').val();
        var password = $('#user_pwd').val();
        if (username === '' || password === '') {
            layer.msg('用户名或密码不能为空');
            return;
        }

        $.ajax({
            url: "/login_check",
            type: 'post',
            dataType: 'json',
            data: {username: username, password: md5(password)},
            success: function (res) {
                if (res.code === 200) {
                    location.href = res.url;
                } else {
                    layer.msg(res.msg);
                }
            }
        })
    });
</script>
</html>